<template>
  <div>
    <a-radio-group
      :value="radioVal"
      @change="radioChange"
      style="margin-bottom: 16px;margin-left: 20px;"
      button-style="solid">
      <a-radio-button :value="1">时序数据</a-radio-button>
      <a-radio-button :value="2">预测数据</a-radio-button>
    </a-radio-group>
    <div class="extra-wrapper" v-show="radioVal == 2">
      <div class="extra-item extra-item-active" style="width: 95%;">
        <a-select
          placeholder="请选择模块"
          v-model="modelType"
          style="width: 95%;"
          :allow-clear="true"
          mode="multiple"
          @select="selectModel"
          @change="changeModel">
          <a-select-option :value="item.itemValue" v-for="(item, index) in modelList" :key="index">{{
            item.itemText
          }}</a-select-option>
        </a-select>
      </div>
    </div>
    <div class="extra-wrapper">

      <div class="extra-item extra-item-active">
        <a-select placeholder="请选择门店" v-model="queryParam.storeId" :allow-clear="true" style="width: 170px;">
          <a-select-option :value="item.storeId" v-for="(item, index) in storeList" :key="item.storeId">{{
            item.storeName
          }}</a-select-option>
        </a-select>
      </div>
      <div class="extra-item" style="width: 300px;">
        <selectProject @input="onInput" style="width: 300px;" ref="selectProject"></selectProject>
      </div>
      <div class="extra-item extra-item-active">
        <a-select placeholder="请选择周期类型" v-model="queryParam.periodType" :allow-clear="true" style="width: 170px;">
          <a-select-option :value="item.val" v-for="(item, index) in typeList" :key="index">{{
            item.name
          }}</a-select-option>
        </a-select>
      </div>
      <div class="extra-item extra-item-active" v-show="radioVal == 2">
        <a-input placeholder="请输入预测序列长度" type="number" v-model.trim="queryParam.horizon" />
      </div>
      <div class="extra-item" v-show="radioVal == 1">
        <a-date-picker v-model="queryParam.beginDate" placeholder="请选择开始时间" value-format="YYYY-MM-DD">
          <template #suffixIcon>
          </template>
        </a-date-picker>
        <a-date-picker v-model="queryParam.endDate" placeholder="请选择结束时间" value-format="YYYY-MM-DD" />
      </div>
      <div class="extra-item" v-show="radioVal == 2">
        <a-date-picker v-model="queryParam.beginDate2" placeholder="请选择开始时间" value-format="YYYY-MM-DD">
          <template #suffixIcon>
          </template>
        </a-date-picker>
        <a-date-picker v-model="queryParam.endDate2" placeholder="请选择结束时间" value-format="YYYY-MM-DD" />
      </div>
      <div class="extra-item" v-show="radioVal == 1">
        <a-button type="primary" @click="onSearch">查询</a-button>
        <a-button style="margin-left: 8px" @click="onReset">重置</a-button>
      </div>
    </div>
    <div v-show="dataSource.length > 0">
      <a-spin tip="Loading..." :spinning="stepLoading">
        <div class="container" :id="chartName"></div>
      </a-spin>
    </div>

    <div style="height: 500px;" v-show="dataSource.length == 0">
      <a-empty style="margin-top: 100px;" />
    </div>
  </div>
</template>
<script>
import { getStores } from '@/api/stores'
import { getTSDatas, getPredictedVal } from '@/api/analyse'
import selectProject from './selectProject'
import { getAppointDicts, detailDicts } from '@/api/base'

import { Chart } from '@antv/g2'
export default {
    components: { selectProject },
    data () {
        return {
            radioVal: 1,
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            queryParam: {
                storeId: undefined,
                projectId: undefined,
                periodType: undefined,
                model: undefined,
                horizon: '',
                beginDate: '',
                endDate: '',
                beginDate2: '',
                endDate2: ''
            },
            typeList: [{ id: 1, name: '日', val: 'D' }, { id: 2, name: '月', val: 'M' }],
            loading: false,
            storeList: [],
            projectsList: [],
            // 图表数据
            style: { stroke: '#fff', lineWidth: 1 }, // 折线的边
            opacity: ['key', function (val) {
                if (val === 'China') {
                    return 1
                }
                return 0.7
            }],
            scale: [{
                dataKey: 'dateStr',
                range: [0, 1]
            }],
            padding: [40, 40, 180, 50],

            dataSource: [],
            // 时间范围
            selectPriceDate: '',
            BeginAndEnd: [],
            // 预测数据的时间范围
            selectPriceDate2: '',
            BeginAndEnd2: [],
            // 模块
            modelType: undefined,
            modelList: [],
            // 门店项目时序数据
            TSData: [],
            FCData: [],
            projectName: '未知数据',

            focus: null,
            stepLoading: true,
            chartName: 'chartName0'
        }
    },
    methods: {
        setContainerId (id) {
            this.chartName = 'chartName' + id
            if (this.focus == null) {
                this.$nextTick(() => {
                    this.createChart()
                    this.init()
                })
            }
        },
        sortKey (array, key) {
            return array.sort(function (a, b) {
                var x = a[key]
                var y = b[key]
                return x > y ? 1 : x < y ? -1 : 0
            })
        },
        createChart () {
            console.log(this.chartName)
            this.focus = new Chart({
                // container: 'container',
                // pixelRatio: window.devicePixelRatio,
                // autoFit: true,
                // height: 400,//图表高度
                // padding: [40, 40, 80, 40],
                container: this.chartName,
                height: 400,
                width: 1100,
                paddingLeft: 60
            })
        },
        changeChart () {
            this.focus.changeData(this.dataSource)
            this.stepLoading = false
        },
        // 初始化
        init () {
            this.focus
                .data(this.dataSource)
                .encode('x', 'dateStr')
                .encode('y', 'value')
                .encode('color', 'key')
                .animate(false)
                .axis('x', { grid: false, title: false, tickCount: 5 })
                .axis('y', { grid: false, title: false, tickCount: 5 })
                .line()
                .interaction('brushXFilter', true)
            this.focus.render()
            this.stepLoading = false
        },
        radioChange (e) {
            const { value } = e.target
            this.radioVal = value
        },
        // 选择预算项目
        onInput (item) {
            if (item) {
                this.queryParam.projectId = item.projectId
                this.projectName = item.name
            }
        },
        // 搜索
        onSearch () {
            const {
                storeId,
                projectId,
                periodType,
                beginDate,
                endDate,
                beginDate2,
                endDate2,
                model,
                horizon
            } = this.queryParam
            if (storeId == undefined) {
                this.$message.error('请选择门店')
                return
            }
            if (projectId == undefined) {
                this.$message.error('请选择预算项目')
                return
            }
            if (periodType == undefined) {
                this.$message.error('请选择预算周期')
                return
            }
            const par = {
                storeId: storeId == undefined ? '' : storeId,
                projectId: projectId == undefined ? '' : projectId,
                periodType: periodType == undefined ? '' : periodType,
                beginDate,
                endDate
            }
            par.beginDate = this.radioVal == 1 ? beginDate : beginDate2
            par.endDate = this.radioVal == 1 ? endDate : endDate2

            par.beginDate = par.beginDate == null ? '' : par.beginDate
            par.endDate = par.endDate == null ? '' : par.endDate
            this.dataSource = []
            this.modelType = undefined
            this.TSData = []
            this.FCData = []
            let result = []
            const _this = this
            this.stepLoading = true
            getTSDatas(par).then(res => {
                if (res.code == 200) {
                    result = res.data
                    if (result.length > 0) {
                        result.forEach(it => {
                            it.key = _this.projectName
                        })
                        this.TSData = result
                        this.dataSource = this.TSData.concat(this.FCData)
                        this.dataSource = this.sortKey(this.dataSource, 'dateStr')
                        this.changeChart()
                    } else {
                        this.stepLoading = false
                        this.$message.error('数据为空')
                    }
                } else {
                    this.stepLoading = false
                    this.$message.error(res.message)
                }
            })
        },
        // 重置
        onReset () {
            if (this.radioVal == 1) {
                this.queryParam = {
                    storeId: undefined,
                    projectId: undefined,
                    periodType: undefined,
                    beginDate: '',
                    endDate: ''
                }
                this.selectPriceDate = ''
                this.BeginAndEnd = []
            } else {
                this.queryParam = {
                    storeId: undefined,
                    projectId: undefined,
                    periodType: undefined,
                    beginDate2: '',
                    endDate2: '',
                    model: undefined,
                    horizon: ''
                }
                this.selectPriceDate2 = ''
                this.BeginAndEnd2 = []
            }
            this.projectName = '未知数据'
            this.modelType = undefined
            this.dataSource = []
            this.TSData = []
            this.FCData = []
            this.$nextTick(() => {
                this.$refs.selectProject.init({ projectId: undefined })
            })
        },
        // 选中模块
        selectModel (val) {
            const {
                storeId,
                projectId,
                periodType,
                horizon
            } = this.queryParam
            if (storeId == undefined) {
                this.$message.error('请选择门店')
                this.modelType = undefined
                return
            }
            if (projectId == undefined) {
                this.$message.error('请选择预算项目')
                this.modelType = undefined
                return
            }
            if (periodType == undefined) {
                this.$message.error('请选择预算周期')
                this.modelType = undefined
                return
            }
            if (horizon == '') {
                this.$message.error('请输入预测序列长度')
                this.modelType = undefined
                return
            }
            this.queryParam.model = val
            const {
                beginDate2,
                endDate2,
                model
            } = this.queryParam

            let result = []
            const par = {
                storeId: storeId == undefined ? '' : storeId,
                projectId: projectId == undefined ? '' : projectId,
                periodType: periodType == undefined ? '' : periodType,
                beginDate: beginDate2 == undefined ? '' : beginDate2,
                endDate: endDate2 == undefined ? '' : endDate2,
                model,
                horizon
            }
            par.beginDate = par.beginDate == null ? '' : par.beginDate
            par.endDate = par.endDate == null ? '' : par.endDate
            this.stepLoading = true
            getPredictedVal(par).then(res => {
                if (res.code == 200) {
                    result = res.data
                    if (result.length > 0) {
                        result.forEach(it => {
                            it.key = val
                            this.dataSource.push(it)
                        })
                        this.FCData = this.dataSource
                        this.dataSource = this.dataSource.concat(this.TSData)
                        this.dataSource = this.sortKey(this.dataSource, 'dateStr')
                        this.changeChart()
                    } else {
                        this.stepLoading = false
                        this.$message.error('数据为空')
                    }
                } else {
                    this.stepLoading = false
                    this.$message.error(res.message)
                }
            })
        },
        // 选择模块
        changeModel (val) {
            this.stepLoading = true
            this.modelType = val
            this.FCData = this.dataSource.filter(filItem => this.modelType.some(eveItem => filItem.key == eveItem))
            this.dataSource = this.FCData.concat(this.TSData)
            this.dataSource = this.sortKey(this.dataSource, 'dateStr')
            this.changeChart()
        }
    },
    mounted () {
        getStores({ storeName: '' }).then(res => {
            if (res.code == 200) {
                this.storeList = res.data
            }
        })
        getAppointDicts('forecasting_model').then(res => {
            const _this = this
            if (res.code == 200) {
                const data = res.data.datas
                console.log(data)
                if (data.length > 0) {
                    detailDicts(data[0].dictId).then(r => {
                        if (r.code == 200) {
                            _this.modelList = r.data.items
                        }
                    })
                }
            }
        })
        // this.createChart()
        // this.init();
    }
}
</script>
<style scoped lang="less" >
.container {
    margin-top: 40px;

}

.extra-wrapper {
    line-height: 55px;
    padding-right: 24px;
    display: flex;
    align-items: center;
    //justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    padding: 0 20px;

    .extra-item {
        display: inline-block;
        margin-right: 24px;
        display: flex;
        align-items: center;
    }

    .extra-item-active:before {
        vertical-align: middle; //加上星号会上下居中，不加会在上角展示
        content: '*';
        color: rgba(255, 59, 48, 1);
        font-size: 26px;
    }
}
</style>
